<template>
  <a-card hoverable class="setting-warp" @click="handleOpenSite">
    <header class="header">
      <component
        class="icon"
        :is="icon"
        :size="32"
        :style="{
          color: iconColor,
        }"
      ></component>
      <h3 class="pl-12px text-18px font-semibold">{{ name }}</h3>
    </header>
    <p class="description">{{ description }}</p>
  </a-card>
</template>

<script setup lang="ts">
  import { useRouter } from 'vue-router';

  interface Props {
    /** 技术名称 */
    name: string;
    /** 技术描述 */
    description: string;
    /** 技术图标 */
    icon: string;
    /** 图标颜色 */
    iconColor?: string;
  }
  const props = withDefaults(defineProps<Props>(), {
    name: '',
    description: '',
    icon: '',
    iconColor: '#4e7cf7',
  });

  const emits = defineEmits(['goDetail']);

  const router = useRouter();

  // 点击前往相应的路由页面
  const handleOpenSite = (): void => {
    emits('goDetail');
  };
</script>

<style scoped lang="less">
  .setting-warp {
    cursor: pointer;
    background-color: #f9f9f9;
    width: 220px;
    height: 270px;
    border: 1px solid #f9f9f9;
    margin: 30px 30px 0 30px;
    transition-property: all;

    .setting-warp:hover {
      transform: translateY(-10px);
    }

    .header {
      position: relative;
      text-align: center;
      margin-top: 30px;

      .icon {
        position: relative;
      }
    }

    .description {
      padding: 15px;
    }
  }
</style>
